<template>
  <div class="body">
    <baidu-map class="bm-view"
               :center="{ lng: 108.327173, lat: 22.823207 }"
               :zoom="mapZoom"
               :scroll-wheel-zoom="true"
               @ready="handler">
      <bm-marker v-for="(item, index) in markerData"
                 :key="index"
                 :position="item.marker"
                 :icon="item.icon"
                 @click="clickMarker(item)">
        <bm-label :content="JSON.stringify(item.list.length)"
                  :labelStyle="{
                    backgroundColor: '#ffffff00',
                    color: '#000',
                    fontSize: '18px',
                    border: 'initial',
                    zIndex: 9999,
                    textAlign: 'center',
                    width: '23px'
                  }"
                  :offset="{ width: 5, height: 5 }" />
      </bm-marker>
      <!--   @mouseover='mouseover(item)' item.list.length
                   @mouseout='mouseout()' -->

      <!-- <bm-info-window :position="infoWindow.position"
                      :show="infoWindow.show"
                      @close="infoWindowClose"
                      :offset='{width:-15,height:30}'>
        <div class="map_info">
          <div class="map_info_content"><span>{{infoWindow.label}}</span></div>
          <div class="map_triangle"></div>
        </div>
      </bm-info-window> -->
      <bm-info-window :position="clickInfoWindow.position"
                      :show="clickInfoWindow.show"
                      :offset="{ width: -15, height: 30 }"
                      @close="clickInfoWindowClose">
        <div class="map_info">
          <div class="box_info">
            <div class="box_device_total">
              <span>园区：{{
                clickMarkerInfo.length > 0
                  ? clickMarkerInfo[0].collectLocation
                  : ""
              }}</span>
            </div>
            <div class="box_device_total">
              <span>设备{{ clickMarkerInfo.length }}个</span>
            </div>
            <div class="box_info_content_total">
              <div v-for="item in clickMarkerInfo"
                   :key="item.id"
                   class="box_info_content"
                   @click="clickDevice(item)">
                <img :src="item.url"
                     width="32"
                     height="32" />
                <span>{{ item.collectName }}</span>
                <span :class="
                  item.isWarning && item.isAlarming == false
                    ? 'warning_yellow'
                    : item.isAlarming
                      ? 'warning_red'
                      : ''
                ">
                  {{
                    item.isWarning && item.isAlarming == false
                      ? "预警"
                      : item.isAlarming
                        ? "报警"
                        : ""
                  }}
                </span>
              </div>
            </div>
          </div>
          <div class="map_triangle"></div>
        </div>
      </bm-info-window>

      <div class="map_botton_box">
        <div id="map_search"
             class="map_botton map_icon map_search"
             :class="{ map_search_width: isSearch }">
          <i class="el-icon-search"
             @click="changeIsSearch()"></i>
          <div v-show="isSearch">
            <el-input v-model="parkName"
                      placeholder="请输入园区名称"
                      @input="changeParkName()"></el-input>
          </div>
        </div>
        <div id="plusZoom"
             class="map_botton map_icon map_plus"
             :class="{ extre_mum: mapZoom === 19 }"
             @click="changeZoon(true)">
          <i class="el-icon-plus"></i>
        </div>
        <div id="minusZoom"
             class="map_botton map_icon map_minus"
             :class="{ extre_mum: mapZoom === 4 }"
             @click="changeZoon(false)">
          <i class="el-icon-minus"></i>
        </div>

        <div class="map_botton map_type"
             @mouseleave="out()"
             @mouseenter="comein()">
          <div v-for="item in mapTypeList"
               :key="item.id">
            <img v-show="item.isDisplay"
                 :id="'img' + item.id"
                 :src="item.url"
                 :title="item.title"
                 :class="{ img_hover: mapType === item.id }"
                 @click="clickMapType(item.id)" />
          </div>
        </div>
      </div>
      <div v-if="isDisplayDrawer"
           class="map_drawer">
        <map-info :drawerData="drawerData"
                  @drawerClose="drawerClose"></map-info>
      </div>
    </baidu-map>
  </div>
</template>
<script>
import { BmlMarkerClusterer } from 'vue-baidu-map'
import MapInfo from './mapInfo.vue'
export default {
  components: {
    BmlMarkerClusterer,
    MapInfo
  },
  props: {
    deviceDictionaries: {
      type: Array,
      default: Array
    },
    warringList: {
      type: Array,
      default: Array
    }
  },
  data() {
    return {
      mapZoom: 13,
      publicMap: null,
      isDisplay: false,
      isSearch: false,
      mapType: 2, // 默认卫星地图
      markerOriginalData: [],
      markerData: [],
      mapTypeList: [
        {
          url: require('@/assets/screen/yuanshandai.png'),
          title: '标准',
          id: 1,
          isDisplay: false
        },
        {
          url: require('@/assets/screen/shijing.png'),
          title: '实景',
          id: 2,
          isDisplay: true
        },
        {
          url: require('@/assets/screen/huanyinghei.png'),
          title: '幻影黑',
          id: 3,
          isDisplay: false
        }
      ],
      // infoWindow: {
      //   position: { lng: 108.327173, lat: 22.823207 },
      //   show: false,
      //   label: ''
      // },
      clickInfoWindow: {
        show: false,
        position: null
      },
      clickMarkerInfo: [],
      activeName: 'first',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      isDisplayDrawer: false,
      drawerData: null,
      videoList: [], // { streamUrl: "http://47.107.135.104:8281/uploads/image/vidio/222.mp4", cameraName: "生产楼1F油机房1（人脸）" },
      // {streamUrl:"http://47.107.135.104:8281/uploads/image/vidio/222.mp4",cameraName:"生产楼1F油机房1（人脸）"},
      deviceTypeList: [
        { label: '全部类型', isDisplay: true, id: 0 },
        { label: '无线电气火灾', isDisplay: true, id: 1 },
        { label: '防火摄像机', isDisplay: true, id: 2 },
        { label: '无线烟感', isDisplay: true, id: 3 },
        { label: '天然气', isDisplay: true, id: 4 },
        { label: '无线液化石油气', isDisplay: true, id: 5 }
      ],
      isSwitch: true,
      // deviceDictionaries: [],
      deviceList: [
        {
          label: '无线液化石油气',
          imgUrl: '/static/img/electricVehicle/yhsy-ic-min.png'
        },
        {
          label: '无线电气火灾',
          imgUrl: '/static/img/electricVehicle/dianqi-ic-min.png'
        },
        {
          label: '无线烟感',
          imgUrl: '/static/img/electricVehicle/yangan-ic-min.png'
        },
        {
          label: '天然气',
          imgUrl: '/static/img/electricVehicle/tianranqi-ic-min.png'
        },
        {
          label: '防火摄像机',
          imgUrl: '/static/img/electricVehicle/shexiang-ic-min.png'
        }
      ],
      clustererStyles: [],
      parkName: '',
      videoData: null
    }
  },

  watch: {
    warringList: {
      handler(data) {
        this.warringList = data
        this.happenNewWarring()
      }
    }
  },
  mounted() {
    // this.initMarker()
  },
  methods: {
    initMarker() {
      this.$get('console/equipmentCollect/list', {
        pageSize: 9999,
        pageNum: 1
      }).then(r => {
        // 坐标点
        let list = r.data.data.rows || []
        list = list.map(x => {
          return {
            ...x,
            collectTypeStr: this.getTypeStr(x.collectType, false),
            statusStr: this.getStatusStr(x.deviceStatus),
            marker: { lng: Number(x.lon), lat: Number(x.lat) },
            url: this.getTypeStr(x.collectType, true)
            // icon: { url: this.getTypeStr(x.collectType, true), size: { width: 34, height: 33 } }
          }
        })
        this.markerData = this.groupArr(list, 'collectLocation')
        // // 原始的坐标数据（用于切换显示）
        this.markerOriginalData = JSON.parse(JSON.stringify(this.markerData))
        this.happenNewWarring()
      })
    },
    groupArr(list, field) {
      var fieldList = []
      const att = []
      list.map(e => {
        fieldList.push(e[field])
      })
      // 数组去重
      fieldList = fieldList.filter((e, i, self) => {
        return self.indexOf(e) == i
      })
      for (var j = 0; j < fieldList.length; j++) {
        // 过滤出匹配到的数据
        var arr = list.filter(e => {
          return e.collectLocation == fieldList[j]
        })
        att.push({
          name: arr[0].collectLocation,
          marker: arr[0].marker,
          icon: {
            url: '/static/img/electricVehicle/park1.svg',
            size: { width: 34, height: 33 }
          },
          list: arr
        })
      }
      return att
    },

    getTypeStr(type, isUrl) {
      const list = this.deviceDictionaries.filter(x => x.dictValue === type)
      const icon = this.deviceList.filter(x => x.label === list[0].dictText)
      const url =
        icon.length > 0
          ? icon[0].imgUrl
          : '/static/img/electricVehicle/question.png'
      return isUrl ? url : list[0].dictText
    },
    getStatusStr(type) {
      const status = {
        0: '预警',
        1: '正常',
        2: '失联',
        3: '未激活',
        4: '故障',
        5: '故障隔离'
      }
      return status[type]
    },
    handler({ BMap, map }) {
      this.publicMap = map
      this.publicMap.setMapType(BMAP_SATELLITE_MAP)
    },
    clickMapType(type) {
      if (type === 1) {
        this.publicMap.setMapStyle({ style: 'normal' })
        this.publicMap.setMapType(BMAP_NORMAL_MAP)
      } else if (type === 2) {
        this.publicMap.setMapType(BMAP_SATELLITE_MAP)
      } else {
        this.publicMap.setMapStyle({ style: 'midnight' })
        this.publicMap.setMapType(BMAP_NORMAL_MAP)
      }
      this.mapType = type
    },
    // 鼠标移出切换地图类型div
    out() {
      this.mapTypeList.map(x => {
        x.isDisplay = false
      })
      const index = this.mapType - 1 < 0 ? 0 : this.mapType - 1
      this.mapTypeList[index].isDisplay = true
    },
    // 鼠标移入切换地图类型div
    comein() {
      this.mapTypeList.map(x => {
        x.isDisplay = true
      })
    },
    // // 鼠标移入坐标点
    // mouseover (data) {
    //   // this.infoWindow = data
    //   this.infoWindow.label = data.name
    //   this.infoWindow.position = data.marker
    //   this.infoWindow.show = true
    // },
    // // 鼠标移出坐标点
    // mouseout () {
    //   this.infoWindow.show = false
    // },
    // infoWindowClose () {
    //   this.infoWindow.show = false
    // },
    clickMarker(data) {
      this.clickMarkerInfo = data.list
      this.clickInfoWindow.position = data.marker
      this.clickInfoWindow.show = true
    },

    clickInfoWindowClose() {
      this.clickInfoWindow.show = false
    },
    clickDevice(data) {
      console.log(data)
      this.drawerData = data
      this.isDisplayDrawer = true
    },
    drawerClose() {
      this.isDisplayDrawer = false
    },
    // 切换类型显示坐标点
    // clickSwitch (data) {
    //   let className = ''
    //   let allTypeClassName = ''
    //   data.isDisplay = !data.isDisplay
    //   if (!data.isDisplay) {
    //     className = 'marker_switch_button_label_close'
    //   } else {
    //     className = 'marker_switch_button_label_hover'
    //   }

    //   if (data.id === 0) {
    //     this.deviceTypeList.forEach(e => {
    //       if (e.id != 0) {
    //         e.isDisplay = data.isDisplay
    //       }
    //       document.getElementById('mapSwitch' + e.id).className = className
    //     })
    //     return
    //   }
    //   // 获取除 全部类型 之外的所有设备类型
    //   let notAllTypeDevices = this.deviceTypeList.filter(x => x.id !== 0)
    //   // 获取不显示的设备类型
    //   let notDisplayDevices = notAllTypeDevices.filter(x => x.isDisplay === false)
    //   notDisplayDevices.forEach(e => {
    //     this.markerData.map(x => x.collectTypeStr != e.label)
    //   })
    //   if (notDisplayDevices.length > 0) {
    //     this.deviceTypeList[0].isDisplay = false
    //     allTypeClassName = 'marker_switch_button_label_close'
    //   } else {
    //     this.deviceTypeList[0].isDisplay = true
    //     allTypeClassName = 'marker_switch_button_label_hover'
    //     // 显示所有坐标点
    //     this.markerData = this.markerOriginalData
    //   }
    //   document.getElementById('mapSwitch' + data.id).className = className
    //   document.getElementById('mapSwitch0').className = allTypeClassName
    // },
    changeZoon(isAdd) {
      if (isAdd && this.mapZoom < 19) {
        this.mapZoom = this.mapZoom + 1
      }
      if (!isAdd && this.mapZoom > 4) {
        this.mapZoom = this.mapZoom - 1
      }
    },
    changeIsSearch() {
      this.isSearch = !this.isSearch
    },
    changeParkName() {
      if (this.parkName === '') {
        this.markerData = this.markerOriginalData
      } else {
        const data = []
        this.markerData.forEach(x => {
          if (x.name.indexOf(this.parkName) != -1) {
            return data.push(x)
          }
        })
        this.markerData = data
      }
    },
    happenNewWarring() {
      if (this.markerData.length > 0) {
        this.markerData.forEach(e => {
          const data = [] // 黄色预警
          const data1 = [] // 红色报警
          e.list.forEach(x => {
            const yData = []
            // 默认不存在预警 告警
            x['isAlarming'] = false
            x['isWarning'] = false
            this.warringList.forEach(y => {
              if (x.collectCode === y.deviceSource) {
                if (
                  (y.confirmRemark === '未确认' ||
                    y.confirmRemark === '确认超时') &&
                  y.solveStatus == 0
                ) {
                  // 未确认 预警
                  x['isWarning'] = true // '预警'
                  data.push(x)
                } else if (
                  (y.confirmRemark === '已确认' ||
                    y.confirmRemark === '确认及时') &&
                  y.solveStatus == 0
                ) {
                  // 已确认 告警
                  x['isAlarming'] = true
                  data1.push(x)
                }
                // if (y.solveStatus === 1) {
                //   // 已处理 消除预警、告警
                //   x['isAlarming'] = false
                //   x['isWarning'] = false
                // }

                yData.push(y)
                x['warningData'] = yData
              }
            })
          })
          if (data.length > 0 && data1.length === 0) {
            // 存在预警
            e.icon.url = '/static/img/electricVehicle/park2.svg'
          } else if (data.length > 0 && data1.length > 0) {
            // 存在预警 也存在告警
            e.icon.url = '/static/img/electricVehicle/park3.svg'
          } else if (data1.length > 0 && data.length === 0) {
            // 存在告警
            e.icon.url = '/static/img/electricVehicle/park3.svg'
          } else if (data.length === 0 && data1.length === 0) {
            // 啥警都没有
            e.icon.url = '/static/img/electricVehicle/park1.svg'
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
}
.bm-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.BMap_bottom {
  display: none;
}
/deep/ .BMap_pop {
  > div,
  > img:nth-child(10) {
    display: none;
    overflow: unset;
  }
  > div:nth-child(9) {
    display: block;
    overflow: unset;
  }
}

.map_info_content {
  background: #333333c9;
  color: rgb(255, 255, 255);
  font-size: 16px;
  padding: 14px;
  border-radius: 5px;
}
.map_triangle {
  width: 0;
  height: 0;
  border-left: 8px solid #ffffff00;
  border-right: 8px solid #ffffff00;
  border-top: 15px solid #ffffff;
}
.map_drawer {
  position: absolute;
  right: 2%;
  bottom: 2%;
  min-height: 400px;
}

.marker_switch {
  position: absolute;
  bottom: 5%;
  width: 100%;
  padding: 0 10%;
  .marker_switch_img {
    position: relative;
    height: 35px;
    cursor: pointer;
  }
  .marker_switch_img_1 {
    width: 100%;
    height: 100%;
    margin-left: -10%;
  }
  .marker_switch_img_2 {
    width: 25px;
    position: absolute;
    left: 47%;
  }
  .marker_switch_button {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .marker_switch_button_label_hover {
    color: #fff;
  }
  .marker_switch_button_label_close {
    color: #999;
  }
  .marker_switch_img_3 {
    padding: 10px;
    background-image: url("/static/img/electricVehicle/map-bt.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
  .marker_switch_img_4 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    top: -70%;
  }
}

.map_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .box_info {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
  }
  .box_info_content_total {
    overflow: auto;
    width: 100%;
    max-height: 300px;
  }
  .box_info_content {
    display: flex;
    align-items: center;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #dedede;
    font-size: 14px;
    cursor: pointer;
    // span {
    //   margin-left: 10px;
    // }
  }
  .box_info_content:hover {
    background: #00a1ff0f;
  }
  .box_device_total {
    margin-bottom: 10px;
    color: #666;
  }
  .warning_red {
    padding: 0 10px;
    width: 30px;
    color: red;
    border: 1px solid red;
  }
  .warning_yellow {
    width: 30px;
    padding: 0 10px;
    color: #ff8100;
    border: 1px solid #ff8100;
  }
}

.map_botton_box {
  .map_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
  }
  .extre_mum {
    background: #dedede !important;
    cursor: initial !important;
  }
  .map_botton {
    position: absolute;
    left: 2%;
    background: #fff;
    padding: 5px 0;
    min-width: 40px;
    height: 40px;
    cursor: pointer;
    margin: 20px 0;
    border-radius: 5px;
  }
  .map_plus {
    top: 11%;
    margin-bottom: 0;
    border-bottom: 1px solid #999;
  }
  .map_minus {
    top: 23%;
    margin: 0;
  }

  .map_type {
    top: 30%;
    display: flex;
    img {
      width: 32px;
      height: 32px;
      margin: 0 5px 0 5px;
    }
    .img_hover {
      border: 2px solid #0089ff;
    }
  }
  .map_search {
    top: 0;
    .el-icon-search {
      width: 40px;
      text-align: center;
    }
  }
  .map_search_width {
    width: 25%;
  }
}
/deep/ .BMap_cpyctrl {
  display: none;
}
/deep/ .anchorBL {
  display: none;
}
/deep/ .BMap_top {
  display: none;
}
/deep/ .BMap_center {
  display: none;
}
/deep/ .BMap_bottom {
  display: none;
}
/deep/ .BMap_shadow {
  display: none;
}
/deep/ .vjs-control:before {
  padding-top: initial !important;
}
</style>
